<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>bootstrap form</title>
<!-- Bootstrap core CSS -->
<link
	href="${basePath}commentResources/bootstrap-3.3.7-dist/css/bootstrap.min.css"
	rel="stylesheet">
<!-- Optional Bootstrap Theme -->
<link href="data:text/css;charset=utf-8,"
	data-href="${basePath}commentResources/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css"
	rel="stylesheet" id="bs-theme-stylesheet">
<!-- Bootstrap core JavaScript
		<!-- Placed at the end of the document so the pages load faster -->
<script
	src="${basePath}commentResources/jquery-1.12.4/jquery-1.12.4.min.js"></script>
	<!-- 	<script
	src="http://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script> -->
<script
	src="${basePath}commentResources/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<!-- bootstrap-datetimepicker -->
<link
	href="${basePath}commentResources/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"
	rel="stylesheet" />
<script
	src="${basePath}commentResources/bootstrap-datetimepicker/js/moment-with-locales.min.js"></script>
<script
	src="${basePath}commentResources/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<!-- JQuery-validation -->
<script
	src="${basePath}commentResources/jquery-validation-1.17.0/dist/jquery.validate.min.js"></script>
<script src="${basePath}commentResources/jquery-validation-1.17.0/ext/jquery.validate.ext.js"></script>
<!-- 加载的jquery脚本 -->
<script type="text/javascript">
    // dom加载完成时就执行该方法
	$(function() {
		// 加载时间选择框
		$('#datetimepicker1').datetimepicker({  
	        format: 'YYYY-MM-DD HH:mm:ss',  
	        locale: moment.locale('zh-cn')  
	    });
		// 加载jquery validation前端验证
		validateStudentInfoAddForm();
	});
    
	// jquery validation验证方法
	function validateStudentInfoAddForm() {
		// 选取要验证的表单
		$("#stuAddForm").validate(
				{
					// 设置jquery validation 验证控件的调试模式，不调用后台
					//debug: true, //调试模式取消submit的默认提交功能   
	                //errorClass: "label.error", //默认为错误的样式类为：error   
	                focusInvalid: false, //当为false时，验证无效时，没有焦点响应  
	                onkeyup: false,   
	                submitHandler: function(form){   //表单提交句柄,为一回调函数，带一个参数：form   
	                    //alert("提交表单");   
	                    form.submit();   //提交表单   
	                },   
					
					// 验证规则		
					rules : {
						// 验证控件的id或name属性值（注意：单选、多选等组合控件使用name属性值）		
						stuName : {
							required:true,
							/* remote:使用ajax进行后台数据库验证
							   remote验证要求ajax的后台响应函数只能返回boolean类型的true或false
							*/
						remote: {
							    url: "${basePath}isStuNameUniqueAction",     //后台处理程序
							    type: "post",               //数据发送方式
							    dataType: "json",           //接受数据格式   
							    data: {                     //要传递的数据
							        username: function() {
							        	// ajax发送的数据使用函数进行获取，注意函数需要使用return进行返回
							            return $("#stuName").val();
							        },
	                				stuAge:function(){
	                					return 20;
	                				}
							    }
							}
						},
						stuSex : "required",
						stuBirthday : {
									required : true,
									date:true
								},
						stuAddress:"required",
						stuTel:{
							required: true,
							allphone:true
						},
						stuDepartment : {
									required : true									
								},
						stuImg : {
									required : true,
								}
							},
					messages: {
						stuName :{
							required : "请输入学生姓名",
							remote: "用户名已存在"
						} ,
						stuSex : "请选择学生性别",
						stuBirthday : {
									required : "请选择出生日期",
									date: "出生日期格式不正确"
								},
						stuAddress:"请输入地址",
						stuTel:
						{
							required: "请输入联系电话",
							allphone:"输入的电话号码格式不正确"
						},
						stuDepartment : {
									required : "请选择系别"									
								},
						stuImg : {
									required : "请选择头像"
								}
						},
							errorElement : "em",
							errorPlacement : function(error, element) {
								// 设置错误提示信息显示的位置
								error.addClass("help-block");

								if (element.is(":radio")) // 单选框信息显示的位置
							        error.appendTo(element.parent().parent());
							    else if (element.is(":checkbox"))// 多选框信息显示的位置
							        error.appendTo(element.parent()); 
							    else // 其他控件信息显示的位置
							        error.appendTo(element.parent());
							},
							// 基于bootstrap设置控件以及错误信息的样式，需要导入bootstrap的css文件
							highlight : function(element, errorClass,
									validClass) {
								$(element).parents(".col-sm-4").addClass(
										"has-error").removeClass("has-success");
							},
							// 基于bootstrap设置控件验证成功之后的样式，需要导入bootstrap的css文件
							unhighlight : function(element, errorClass,
									validClass) {
								$(element).parents(".col-sm-4").addClass(
										"has-success").removeClass("has-error");
							} 
						});
	}
</script>
<style>
/* .error{
color: red;
} */
</style>
</head>

<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12">
				<div class="row">
					<div class="col-md-3"></div>
					<div class="col-md-6">
						<form id = "stuAddForm" class="form-horizontal"
							action="${basePath}StudentInfoAddAction" method="post"
							enctype="multipart/form-data">
							<div class="form-group"></div>
							<div class="form-group">
								<label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
								
								<div class="col-sm-4">
									<input type="text" class="form-control" id="stuName"
										name="stuName" placeholder="请输入学生姓名">
								</div>

								<label for="inputEmail3" class="col-sm-2 control-label">性别</label>
								<div class="col-sm-4">
									<label class="radio-inline"> <input type="radio"
										id="stusex2" name="stuSex" value="女"> 女
									</label> <label class="radio-inline"> <input type="radio"
										id="stusex2" name="stuSex" value="男"> 男
									</label>
								</div>
							</div>
							<div class="form-group">
								<label for="inputPassword3" class="col-sm-2 control-label">出生日期</label>
								<div class="col-sm-4">
									<!-- <input type="text" class="form-control" id="stuBirthday"
										name="stuBirthday" placeholder="请选择出生日期"> -->
									<div class='input-group date' id='datetimepicker1'>
										<input type='text' class="form-control" id="stuBirthday"
											name="stuBirthday" /> <span class="input-group-addon">
											<span class="glyphicon glyphicon-calendar"></span>
										</span>
									</div>
								</div>

								<label for="inputPassword3" class="col-sm-2 control-label">地址</label>
								<div class="col-sm-4">
									<input type="text" class="form-control" id="stuAddress"
										name="stuAddress" placeholder="请输入地址">
								</div>
							</div>
							<div class="form-group">
								<label for="inputPassword3" class="col-sm-2 control-label">电话</label>
								<div class="col-sm-4">
									<input type="text" class="form-control" id="stuTel"
										name="stuTel" placeholder="请输入电话">
								</div>

								<label for="inputPassword3" class="col-sm-2 control-label">系别</label>
								<div class="col-sm-4">
									<select class="form-control" id="stuDepartment"
										name="stuDepartment">
										<option></option>
										<option value="1">计算机</option>
										<option value="2">电信</option>
										<option value="3">机电</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label for="inputPassword3" class="col-sm-2 control-label">头像</label>
								<div class="col-sm-4">
									<!-- 如果后台使用实体model类接收表单数据，则要求file控件的name属性值，不能和实体model类的属性名相同，
									否则表单的数据类型转换会出问题，导致后台无法响应的问题。（400 bad request）
									上传文件的控件的name属性的命名要求：前缀 file_实体类属性名  ，
									这样可以直接将上传文件的路径保存到对应的实体类的属性中 -->
									<input type="file" class="form-control" id="stuImg"
										name="file_stuImg">
								</div>
							</div>

							<div class="form-group">
								<div class="col-sm-offset-4 col-sm-4">
									<button type="submit" id="btnSave" class="btn btn-default">保存</button>
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<button type="reset" class="btn btn-default">重置</button>
								</div>
							</div>
						</form>
					</div>
					<div class="col-md-3"></div>
				</div>
			</div>
		</div>
	</div>

</body>

</html>